<template>
  <div v-html="str"></div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
import { getDetailApi } from "@/api/api";
const route = useRoute();
console.log(route.query.id);
const str = ref("");
getDetailApi({ id: route.query.id }).then((res) => {
  console.log(res);
  str.value = res.data.content;
});
</script>

<style lang="scss">
.detail {
  width: 100%;
  height: calc(100vh - 120px);
  background-color: #e1e1e1;
  overflow: hidden;
}

.bg {
  background-color: #80bd01;
  color: #fff !important;
}
.box-right {
  width: 20%;
  background-color: #e1e1e1;
  margin-left: 1%;
  .top {
    background-color: #fff;
    padding: 4%;
    box-sizing: border-box;
    p:nth-child(1) {
      margin-bottom: 10px;
    }
    p:nth-child(2) {
      margin-bottom: 5px;
    }
  }
  .middle {
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 15px;
    .middle-head {
      width: 100%;
      height: 40px;
      display: flex;
      padding: 0 4%;
      align-items: center;
      background-color: #f6f6f6;
    }
    .middle-middle {
      padding: 4%;
      p:nth-child(1) {
        margin-top: 0;
      }
      p {
        margin: 5px 0;
        color: gray;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
